var dom;
var eventSelected;
var idedeleteFlag=false;

exports.install = function(Vue,options){
    Vue.prototype.rMenuAction = function (event,action){
        if("delete" == action){
            this.deleteElement();
        }
        this.hideRMenu();
    };

    Vue.prototype.hideRMenu = function (event){//隐藏右键菜单显示
        var menu = document.getElementById("rMenu");
        menu.style.display = "none";
    };
    //判断IE开始
    Vue.prototype.isIE_ = function (){
       if(!!window.ActiveXObject || "ActiveXObject" in window){
    　　　　return true;
    　　}else{
    　　　　return false;
    　　}
    };
    Vue.prototype.isIE11_ = function (){
       if((/Trident\/7\./).test(navigator.userAgent)){
    　　　　return true;
    　　}else{
    　　　　return false;
    　　}
    };
    //判断IE结束

    Vue.prototype.deleteElement = function (){
        if(undefined != eventSelected){
            if(eventSelected.getAttribute('name') == "pageinitccontainer"){
                this.$notify({
                    title: '提示',
                    message: '初始布局容器不能删除！'
                });
            }else{
            	if(eventSelected.getAttribute("class") != null 
            			&& eventSelected.getAttribute("class").indexOf("el-table_") != -1
            			&& eventSelected.getAttribute("class").indexOf("_column_") != -1){
            		 this.$notify({
                         title: '提示',
                         message: '请在左侧资源树种删除table_column！'
                     });
            		 return;
            	}
            	eventSelected = this.deleteElementFilter(eventSelected);
            	
                if(this.isIE_() || this.isIE11_()){  // 判断是否是IE
            　　　　		eventSelected.removeNode(true)
            　　		}else{
            　　　 			eventSelected.remove();
                }
                //callJava delete element
                if(!idedeleteFlag){
                	idedeleteFlag = false;
                	try {
                        var obj = {};
                        obj.id = eventSelected.getAttribute("id");
                        eventSelected = undefined;
                        callJavaNative("afterDelete",JSON.stringify(obj));
                    } catch (error) {
                        console.log(error);
                    }
                }else{
                	eventSelected = undefined;
                }
            }
        }
    };
    
    Vue.prototype.deleteElementFilter = function(element){
    	
    	if(element.getAttribute("class") != null && element.getAttribute("class").indexOf("el-input__inner") != -1){
    		element = element.parentNode;
    	}
    	if(element.getAttribute("class") != null && element.getAttribute("class").indexOf("el-input-number") != -1){
    		element = element.parentNode;
    	}
    	if(element.parentNode.getAttribute("class") !=null && element.parentNode.getAttribute("class").indexOf("el-col ") != -1){
    		element = element.parentNode;
    	}
    	if(element.getAttribute("class") != null && element.getAttribute("class").indexOf("el-button") != -1){
    		element = element.parentNode;
    	}
    	if(element.localName == "input" 
    		|| element.localName == "select" 
    		|| element.localName == "button"
    		|| element.localName == "textarea"
    		|| element.localName == "img"
        	|| element.localName == "iframe"){
    		element = element.parentNode;
    	}
    	return element;
    }

    Vue.prototype.drag = function (event){
        this.getFocus(event);
    }

    Vue.prototype.positionChange = function(){
        //call java method to notify vue file is changed
        var jsonParas = {};
        var targetId = null;  //if selected element's id is null then find its first child's id
        if(dom.getAttribute("id") == null){
            if(dom.children.length>0){
                 targetId = dom.children[0].getAttribute("id");
                // put child's id to dom's id, and delete child's id
                dom.setAttribute("id",targetId);
                dom.children[0].removeAttribute("id");
            }
        }else{
            targetId = dom.getAttribute("id");
        }
        jsonParas.id = targetId;  //element id
        //get node's parentnode, to parse parent's id is exist or not
        jsonParas.parentId = dom.parentNode.getAttribute("id") == null? dom.parentNode.parentNode.getAttribute("id"):dom.parentNode.getAttribute("id");
        if(jsonParas.parentId == null || jsonParas.parentId == "null"){
        	if(dom.parentNode.getAttribute("class").indexOf("el-dialog__body") != -1){
        		 jsonParas.parentId = dom.parentNode.parentNode.parentNode.getAttribute("id");
        	}
        }
        //get node's previousElment
        var previousElement = dom.previousElementSibling;
        var brotherId = null;  //if selected element's id is null then find its first child's id
        if(previousElement != null && previousElement.getAttribute("id") == null){
        	// if the previousElement is el-select, then sepcially handle
        	if(previousElement.getAttribute("class") != null && previousElement.getAttribute("class").indexOf("el-select") != -1){
        		brotherId = previousElement.children[0].children[0].getAttribute("id");
        		//delete child's id
            	previousElement.children[0].children[0].removeAttribute("id");
        	}else if(previousElement.children.length>0){
            	brotherId = previousElement.children[0].getAttribute("id");
                //delete child's id
            	previousElement.children[0].removeAttribute("id");
            }
        	//put child's id to previousElement's id
        	previousElement.setAttribute("id",brotherId);
        }else{
        	brotherId = previousElement == null ? null : previousElement.getAttribute("id");
        }
        jsonParas.brotherId = brotherId;
        jsonParas.location = "after"; // fixed
        console.log("afterPositionChange:"+JSON.stringify(jsonParas));
        callJavaNative("afterPositionChange",JSON.stringify(jsonParas));
    }

    Vue.prototype.dropAfter = function (event){
        event.preventDefault();
        var targetDom = event.currentTarget;
        //----- 发现只需 event.currentTarget 即可 但保留注释的逻辑以便查验
        //var targetDom = event.target;
		//console.log(targetDom.getAttribute("class"));
//        try{
//        	if(targetDom.getAttribute("class").indexOf("el-button") == -1){ //if type is button, then it is itself not it's parent
//    			targetDom = event.target.parentNode;
//    		}
//        }catch(e){
//        	return;
//        }
        //this.insertAfter(dom,event.target.parentNode);
        //拖拽放入判断是否满足控件强制约束条件
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-carousel__item") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-carousel") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-carousel-item只能添加到el-carousel控件！'
                });
				return 'error';
			}
		}
        
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-collapse-item") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-collapse") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-collapse-item只能添加到el-collapse控件！'
                });
				return 'error';
			}
		}
		this.insertAfter(dom,targetDom);
        this.positionChange();
    };

    Vue.prototype.drop = function (event){
        event.preventDefault();
        var targetDom = event.currentTarget;
        //if select dom is el-form-item drag into el-form-item then invoke insertAfter
        if(dom.getAttribute("class").indexOf("el-form-item") != -1){
        	if(event.target.getAttribute("class").indexOf("el-form-item") != -1){
        		this.insertAfter(dom,targetDom);
                this.positionChange();
                return;
            }
        }
        //拖拽放入判断是否满足控件强制约束条件
        if(targetDom.getAttribute("class") != null && targetDom.getAttribute("class").indexOf("el-radio-group") != -1){
			var flag = true;
			if(dom.getAttribute("class") !=null &&  dom.getAttribute("class").indexOf("el-radio") != -1){
				flag = false;
			}else if(dom.getAttribute("class") !=null &&  dom.getAttribute("class").indexOf("el-radio-button") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-radio-group只能添加el-radio/el-radio-button控件！'
                });
				return 'error';
			}
		}
		 
        if(targetDom.getAttribute("class") != null && targetDom.getAttribute("class").indexOf("el-checkbox-group") != -1){
			var flag = true;
			if(dom.getAttribute("class") !=null &&  dom.getAttribute("class").indexOf("el-checkbox") != -1){
				flag = false;
			}else if(dom.getAttribute("class") !=null &&  dom.getAttribute("class").indexOf("el-checkbox-button") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-checkbox-group只能添加el-checkbox/el-checkbox-button控件！'
                });
				return 'error';
			}
		}
        
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-menu-item") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-menu") != -1){
				flag = false;
			}else if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-submenu") != -1){
				flag = false;
			}else if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-menu-item-group") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-menu-item只能添加到el-menu/el-submenu/el-menu-item-group控件！'
                });
				return 'error';
			}
		}
        
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-submenu") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-menu") != -1){
				flag = false;
			}else if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-menu-item") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-submenu只能添加到el-menu/el-menu-item控件！'
                });
				return 'error';
			}
		}
        
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-menu-item-group") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-submenu") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-menu-item-group只能添加到el-submenu控件！'
                });
				return 'error';
			}
		}
        
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-breadcrumb__item") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-breadcrumb") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-breadcrumb-item只能添加到el-breadcrumb控件！'
                });
				return 'error';
			}
		}
        
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-step") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-steps") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-step只能添加到el-steps控件！'
                });
				return 'error';
			}
		}

        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-carousel__item") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-carousel") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-carousel-item只能添加到el-carousel控件！'
                });
				return 'error';
			}
		}
        
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-collapse-item") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-collapse") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-collapse-item只能添加到el-collapse控件！'
                });
				return 'error';
			}
		}
        
        if(dom.getAttribute("class") != null && dom.getAttribute("class").indexOf("el-form-item") != -1){
			var flag = true;
			if(targetDom.getAttribute("class") !=null &&  targetDom.getAttribute("class").indexOf("el-form") != -1){
				flag = false;
			}
			if(flag){
				this.$notify({
                    title: '提示',
                    message: 'el-form-item只能添加到el-form控件中！'
                });
				return 'error';
			}
		}

        event.target.appendChild(dom);
        this.positionChange();
    };

    Vue.prototype.allowDrop = function (event){
        event.preventDefault();
    };

    Vue.prototype.getFocus = function (event){
        dom = event.currentTarget;
        this.elementx.elementSelectedDom = dom;
        if(undefined != eventSelected){
        	if(eventSelected.getAttribute("class") != null && (eventSelected.getAttribute("class").indexOf("yfcontainer") != -1 || eventSelected.getAttribute("class").indexOf("ycontainer") != -1)){
        		eventSelected.style.border = "";
        	}else{
        		//eventSelected.style.border="1px solid transparent";
        		eventSelected.style.border=""; //new
        	}
            eventSelected.style.padding = "";  //零时这样处理
            if(eventSelected.getAttribute("class") != null 
            		&& eventSelected.getAttribute("class").indexOf("ui-resizable") != -1) $(eventSelected).resizable("destroy");
        }
        //console.log(event.currentTarget);
        event.currentTarget.style.border="1px solid red";
        if(event.currentTarget.getAttribute("class") != null && (event.currentTarget.getAttribute("class").indexOf("el-input") != -1 || event.currentTarget.getAttribute("class").indexOf("el-select") != -1)){  //零时这样处理 input无法拖动的问题
        	event.currentTarget.style.padding = "0 0 0 10px";
        }
        if(event.currentTarget.localName != null && event.currentTarget.localName.indexOf("div") != -1){  //零时针对原生html 无法拖动的问题
        	event.currentTarget.style.padding = "0 0 0 10px";
        }
        eventSelected = event.currentTarget;
        if(eventSelected.localName != null &&  eventSelected.localName.indexOf("input") != -1){
        	eventSelected = eventSelected.parentNode;
        }
        if(eventSelected.getAttribute("class") == null){
        	$(eventSelected).resizable();
        }else if(eventSelected.getAttribute("class").indexOf("is-leaf") == -1){
        	if(eventSelected.getAttribute("class").indexOf("el-button") != -1){  //if button then selected it's parents div
        		$(eventSelected).parent().resizable();
        		eventSelected = eventSelected.parentNode;
        	}else if(eventSelected.getAttribute("class").indexOf("el-dialog") == -1){   //if el-dialog do not resizable to keep layout normal
        		$(eventSelected).resizable();
        	}
        }
        //this.hideRMenu();  转移到 click的时候才隐藏
        //if this event is left lick, do callJava
        var targetId = null;
        if(dom.getAttribute("id") == null){  //if selected element's id is null then find its first child's id
            if(dom.children.length>0){
                targetId = dom.children[0].getAttribute("id");
                if(targetId == null || targetId == "null"){  // 如果第2层还是为空，下探到第三层的第一个孩子
                	if(dom.children[0].getAttribute("class") != null && dom.children[0].getAttribute("class").indexOf("el-input-group__prepend") != -1){ // el-input-group__prepend
                		targetId = dom.children[0].nextSibling.getAttribute("id");
                    	//delete child's id
                    	dom.children[0].nextSibling.removeAttribute("id");
                	}else{
                		//dom.children[0].children[0].getAttribute("id")!= undefined
                		if($(dom.children[0].children[0]).attr("id") != undefined){
                			targetId = dom.children[0].children[0].getAttribute("id");
                			//delete child's id
                        	dom.children[0].children[0].removeAttribute("id");
                		}
                	}
                }else{
                	//delete child's id
                	dom.children[0].removeAttribute("id");
                }
                // put child's id to dom's id
                dom.setAttribute("id",targetId);
            }
        }else{     	
            targetId = dom.getAttribute("id");
        }
        if(event.type == 'mouseenter' && targetId != null){  //if selected element can't trigger click, turn over mouseenter event to handle this callJavaNative
        	if(dom.getAttribute("class").indexOf("el-select") == -1){  //bind class must contain el-select. if not terminate
        		return;
        	}
        	try{
        		if(this.elementx.elementSelected == "el-option-group"){ // if elementSelected is el-option-group, callJavaNative immediately
                	var obj = {};
                    obj.parentId = dom.getAttribute("id");
                    if(obj.parentId == "null" || obj.parentId == null) return;
                    obj.widgetName = "el-option-group";
                    console.log("addAttachment:"+JSON.stringify(obj));
                    callJavaNative("addAttachment",JSON.stringify(obj));   //addSelectOptionGroup
                    this.elementx.elementSelected = undefined;
                    return;
                }
                if(this.elementx.elementSelected == "el-option"){ // if elementSelected is el-option, callJavaNative immediately
                	var obj = {};
                    obj.parentId = dom.getAttribute("id");
                    if(obj.parentId == "null" || obj.parentId == null) return;
                    obj.widgetName = "el-option";
                    console.log("addAttachment:"+JSON.stringify(obj));
                    callJavaNative("addAttachment",JSON.stringify(obj));   //addSelectOption
                    this.elementx.elementSelected = undefined;
                    return;
                }
        	}catch(e){
        		console.log(e);
        	}   
        }
        if(event.type == 'click' && targetId != null){  //callJava for selected element (brower notify ide)
        	this.hideRMenu(); //隐藏右键菜单
        	try {
        		//if event is checkbox or a label, do not prevent it's default event. if prevent default then check action is invalid
        		if(event.target.getAttribute("class") != null 
        				&& event.target.getAttribute("class").indexOf("el-checkbox") == -1 
        				&& event.target.getAttribute("class").indexOf("el-radio") == -1 
        				&& event.target.getAttribute("class").indexOf("el-upload") == -1 
        				&& event.target.localName != 'a'){
        			event.preventDefault();  // when click event trigger then to keep defluat event from destroying our resizable event down
        		}
        		
        		var flag = true;
        		if(this.elementx.elementSelected != undefined && event.target.getAttribute("class") != null && event.target.getAttribute("class").indexOf("el-radio-group") != -1){
        			if(this.elementx.elementSelected == "el-radio"){
        				flag = false;
        			}else if(this.elementx.elementSelected == "el-radio-button"){
        				flag = false;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-radio-group只能添加el-radio/el-radio-button控件！'
                        });
        				return "wrongAdd";
        			}
        		}
        		 
        		if(this.elementx.elementSelected != undefined && event.target.getAttribute("class") != null && event.target.getAttribute("class").indexOf("el-checkbox-group") != -1){
        			if(this.elementx.elementSelected == "el-checkbox"){
        				flag = false;
        			}else if(this.elementx.elementSelected == "el-checkbox-button"){
        				flag = false;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-checkbox-group只能添加el-checkbox/el-radio-checkbox！'
                        });
        				return "wrongAdd";
        			}
        		}

        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-option'){
        			if(event.target.getAttribute("class") !=null && event.target.getAttribute("class").indexOf("el-select") != -1){
        				flag = false;
        			}else if(event.target.getAttribute("class") !=null && event.target.getAttribute("class").indexOf("el-option-group") != -1){
        				flag = false;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-option只能添加到el-select/el-option-group！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-option-group'){
        			if(event.target.getAttribute("class") !=null && event.target.getAttribute("class").indexOf("el-select") != -1){
        				flag = false;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-option-group只能添加到el-select！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-submenu'){
        			if(event.target.getAttribute("class") !=null && event.target.getAttribute("class").indexOf("el-menu") != -1){
        				flag = false;
        				var obj = {};
                        obj.parentId = dom.getAttribute("id");
                        if(obj.parentId == "null" || obj.parentId == null) return;
                        obj.widgetName = "el-submenu";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj));   //addSelectOption
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-submenu只能添加到el-menu！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-menu-item-group'){
        			if(event.target.getAttribute("class") !=null && event.target.getAttribute("class").indexOf("el-submenu") != -1){
        				flag = false;
        				var obj = {};
                        obj.parentId = dom.getAttribute("id");
                        if(obj.parentId == "null" || obj.parentId == null) return;
                        obj.widgetName = "el-menu-item-group";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj));   //addSelectOption
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-menu-item-group只能添加到el-submenu！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-menu-item'){
        			if(event.target.getAttribute("class") !=null 
        					&& (event.target.getAttribute("class").indexOf("el-menu") != -1 
        							|| event.target.getAttribute("class").indexOf("el-submenu") != -1
        							|| event.target.getAttribute("class").indexOf("el-menu-item-group") != -1)){
        				flag = false;
        				var obj = {};
                        obj.parentId = dom.getAttribute("id");
                        if(obj.parentId == "null" || obj.parentId == null) return;
                        obj.widgetName = "el-menu-item";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj));   //addSelectOption
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-menu-item只能添加到el-menu！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-tab-pane'){
        			if(event.target.getAttribute("class") !=null 
        					&& event.target.getAttribute("class").indexOf("el-tabs") != -1){
        				flag = false;
        				var obj = {};
                        obj.parentId = dom.getAttribute("id");
                        if(obj.parentId == "null" || obj.parentId == null) return;
                        obj.widgetName = "el-tab-pane";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj));   //addSelectOption
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-tab-pane只能添加到el-tabs！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-breadcrumb-item'){
        			if(event.target.getAttribute("class") !=null 
        					&& event.target.getAttribute("class").indexOf("el-breadcrumb") != -1){
        				flag = false;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-breadcrumb-item只能添加到el-breadcrumb！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-dropdown-menu'){
        			if(event.target.getAttribute("class") !=null 
        					&& event.target.getAttribute("class").indexOf("el-dropdown") != -1){
        				flag = false;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-dropdown-menu只能添加到el-dropdown！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-dropdown-item'){
        			if(event.target.getAttribute("class") !=null 
        					&& (event.target.getAttribute("class").indexOf("el-dropdown-menu") != -1 || event.target.getAttribute("class").indexOf("el-dropdown"))){
        				var obj = {};
                        var parentId = dom.getAttribute("id");
                        if(parentId == "null" || parentId == null) return;
                        var parentDom = dom;
                        for(var i=0; i<parentDom.children.length;i++){
                        	if(parentDom.children[i].getAttribute("class") != null && parentDom.children[i].getAttribute("class").indexOf("el-button-group") != -1){
                        		for(var j=0; j<parentDom.children[i].children.length; j++){
                        			if(parentDom.children[i].children[j].getAttribute("class") != null 
                        					&& parentDom.children[i].children[j].getAttribute("class").indexOf("el-dropdown__caret-button") != -1){
                        				var finddropdownId = parentDom.children[i].children[j].getAttribute("aria-controls");
                        				var  finddropdown = document.getElementById(finddropdownId);
                        				obj.brotherId = finddropdown.children[0].getAttribute("id");
                        				break;
                        			}
                        		}
                        	}
                        }
                        obj.widgetName = "el-dropdown-item";
                        obj.location = "before";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj));
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-dropdown-item只能添加到el-dropdown-menu！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-step'){
        			if(event.target.getAttribute("class") !=null 
        					&& event.target.getAttribute("class").indexOf("el-steps") != -1){
        				flag = false;
        				var obj = {};
                        obj.parentId = dom.getAttribute("id");
                        if(obj.parentId == "null" || obj.parentId == null) return;
                        obj.widgetName = "el-step";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj)); 
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-step只能添加到el-steps！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-carousel-item'){
        			if(event.target.getAttribute("class") !=null 
        					&& event.target.getAttribute("class").indexOf("el-carousel") != -1 && event.target.getAttribute("class").indexOf("el-carousel__item") == -1){
        				flag = false;
        				var obj = {};
                        obj.parentId = dom.getAttribute("id");
                        if(obj.parentId == "null" || obj.parentId == null) return;
                        obj.widgetName = "el-carousel-item";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj)); 
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-carousel-item只能添加到el-carousel！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'el-collapse-item'){
        			if(event.target.getAttribute("class") !=null 
        					&& event.target.getAttribute("class").indexOf("el-collapse") != -1 ){
        				flag = false;
        				var obj = {};
                        obj.parentId = dom.getAttribute("id");
                        if(obj.parentId == "null" || obj.parentId == null) return;
                        obj.widgetName = "el-collapse-item";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj)); 
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'el-collapse-item只能添加到el-collapse！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == 'option'){
        			if(event.target.localName !=null 
        					&& event.target.localName == 'select' ){
        				flag = false;
        				var obj = {};
        				console.log(dom);
                        //obj.parentId = dom.getAttribute("id");
        				obj.parentId = event.target.getAttribute("id");
                        if(obj.parentId == "null" || obj.parentId == null) return;
                        obj.widgetName = "option";
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj)); 
                        this.elementx.elementSelected = undefined;
                        return;
        			}
        			if(flag){
        				this.$notify({
                            title: '提示',
                            message: 'option只能添加到select！'
                        });
        				return "wrongAdd";
        			}
        		}
        		
        		if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == "el-table-column"){ // if elementSelected is table-column, callJavaNative immediately
        			if(event.target.getAttribute("class") !=null && event.target.getAttribute("class").indexOf("el-table") != -1){
        				var obj = {};
                        //obj.parentId = dom.getAttribute("id");
                        //obj.parentId = event.target.parentNode.getAttribute("id");
                    	obj.parentId = event.currentTarget.getAttribute("id");
                        if(obj.parentId == "null"  || obj.parentId == null) return;
                        obj.widgetName = "el-table-column";
                        this.elementx.elementSelected = undefined;
                        console.log("addAttachment:"+JSON.stringify(obj));
                        callJavaNative("addAttachment",JSON.stringify(obj));   //addTableColumn
                        return;
        			}else{
        				this.$notify({
                            title: '提示',
                            message: 'el-table-column只能添加到el-table控件中！'
                        });
        				return "wrongAdd";
        			}
                }
        		
                if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == "el-form-item"){ // if elementSelected el-form-item, callJavaNative immediately
                	if(event.target.getAttribute("class") !=null && event.target.getAttribute("class").indexOf("el-form") != -1){
                		var obj = {};
                   	 	//obj.parentId = dom.getAttribute("id");
                       obj.parentId = event.target.getAttribute("id");
                       if(obj.parentId == "null"  || obj.parentId == null) return;
                       obj.widgetName = "el-form-item";
                       this.elementx.elementSelected = undefined;
                       console.log("addAttachment:"+JSON.stringify(obj));
                       callJavaNative("addAttachment",JSON.stringify(obj));   //addFormItem
                       return;
                	}else{
                		this.$notify({
                            title: '提示',
                            message: 'el-form-item只能添加到el-form控件中！'
                        });
        				return "wrongAdd";
                	}
                }
                
                if(this.elementx.elementSelected != undefined
                		&& event.currentTarget.getAttribute("class") != null 
                		&& event.currentTarget.getAttribute("class").indexOf("el-table") != -1 
                		&& event.currentTarget.getAttribute("class").indexOf("_column_") != -1
                		&& event.currentTarget.getAttribute("class").indexOf("is-leaf") != -1){ //console.log(event.currentTarget.getAttribute("class"));
                	obj = {};
                	obj.widgetName = this.elementx.elementSelected;
                	this.elementx.elementSelected = undefined;
                	obj.commander = "addElementToTabelColumn";
                	obj.tableId = event.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute("id");
                	if(obj.tableId == null){ //适配模板，如果还为空，在上一级
                		obj.tableId = event.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute("id");
                	}
                	obj.columnFile = event.target.innerHTML;
                	console.log("addAttachment:"+JSON.stringify(obj));
                	callJavaNative("addAttachment",JSON.stringify(obj));   //addAttachment table column add button or something else.
                	return;
                }
                
                if(this.elementx.elementSelected != undefined && (this.elementx.elementSelected == "el-form-item-input" 
                	|| this.elementx.elementSelected == "el-form-item-select" 
                	|| this.elementx.elementSelected == "el-form-item-date")){ // if elementSelected el-form-item-input/select/date, callJavaNative immediately
                	if(event.target.getAttribute("class") !=null && event.target.getAttribute("class").indexOf("el-form") != -1){
                		var obj = {};
                   	 //obj.parentId = dom.getAttribute("id");
                       obj.parentId = event.target.getAttribute("id");
                       if(obj.parentId == "null"  || obj.parentId == null) return;
                       obj.widgetName = this.elementx.elementSelected;
                       this.elementx.elementSelected = undefined;
                       console.log("addAttachment:"+JSON.stringify(obj));
                       callJavaNative("addAttachment",JSON.stringify(obj));   //addFormItem
                       return;
                	}else{
                		this.$notify({
                            title: '提示',
                            message: 'el-form-item只能添加到el-form控件中！'
                        });
        				return "wrongAdd";
                	}
                }
                
                if(this.elementx.elementSelected != undefined && this.elementx.elementSelected == "el-row-col"){
                   var obj = {};
                   obj.parentId = event.target.getAttribute("id");
                   if(obj.parentId == "null"  || obj.parentId == null) return;
                   obj.widgetName = "el-row-col";
                   this.elementx.elementSelected = undefined;
                   console.log("addAttachment:"+JSON.stringify(obj));
                   callJavaNative("addAttachment",JSON.stringify(obj));   //addFormItem
                   return;
                }
                
                /**
                 * 如果选中的控件是非容器，直接添加到控件后边
                 */
                if(this.elementx.elementSelected != undefined && 
                		event.currentTarget.getAttribute("class") != null && 
                		event.currentTarget.getAttribute("class").indexOf("container") == -1){
                	 console.log(event.currentTarget);
                	 var element = this.elementx.elementSelected;
                	 var commandstr = this.elementx.elementSelected.split("-").join("");
                     var actionstr = "this.elementx."+commandstr;
                     var action = eval('(' + actionstr + ')');
                     var target = new action().$mount();
                	 this.insertAfter(target.$el, event.currentTarget);
                	 this.callJavaToAdd(event,target,element,"yelement");    
                }
                
                
                if(this.customerElementAdd(event.target.getAttribute("id"))) return;
                if(targetId == "null") return;
                var obj = {};
                //如果选择的dom存在ID，这判断它的孩子是否为原生html组件 如果是 则 targetid为第一个孩子的id
                //obj.id = targetId;
                obj.id = this.handleNativeComponentClickSelectId(targetId);
                console.log("afterSelectChange,"+JSON.stringify(obj));
                if(this.elementx.block){
                    this.elementx.block = false;
                    return;
                }
                callJavaNative("afterSelectChange",JSON.stringify(obj));   //afterSelectChange
            } catch (error) {
                console.log(error);
            }
        }    
    };
    
    Vue.prototype.handleNativeComponentClickSelectId = function(targetId){
    	var selecetdDom = document.getElementById(targetId);
    	if(selecetdDom.getAttribute("class") != null && selecetdDom.getAttribute("class").indexOf("el-") != -1) return targetId;
    	if(selecetdDom.localName != null && selecetdDom.localName == "div"){
    		if(selecetdDom.children.length > 0){
    			var selecetdDomChild = selecetdDom.children[0];
    			if(selecetdDomChild.localName == "img" || selecetdDomChild.localName == "input" || selecetdDomChild.localName == "select" || 
    					selecetdDomChild.localName == "button" || selecetdDomChild.localName == "textarea"){
    				return selecetdDomChild.id;
    			}
    		}else{
    			return targetId;
    		}
    	}
    	return targetId;
    }

    Vue.prototype.insertAfter = function (newElement, targetElement) {
        if(targetElement==null){
            return void(0);
        }

        var parent = targetElement.parentNode;
        // 如果最后的节点是目标元素，则直接添加
        if (parent.lastChild == targetElement) {
            if(typeof newElement === 'string'){
                var temp = document.createElement('div');
                temp.innerHTML = newElement;
                // 防止元素太多 进行提速
                var frag = document.createDocumentFragment();
                while (temp.firstChild) {
                    frag.appendChild(temp.firstChild);
                }
                parent.appendChild(frag);
            }else{
                parent.appendChild(newElement)
            }
        } else {
            if(typeof newElement === 'string'){
                var temp = document.createElement('div');
                temp.innerHTML = newElement;
                // 防止元素太多 进行提速
                var frag = document.createDocumentFragment();
                while (temp.firstChild) {
                    frag.appendChild(temp.firstChild);
                }
                parent.insertBefore(frag, targetElement.nextSibling);
            }else{
                //如果不是，则插入在目标元素的下一个兄弟节点 的前面
                parent.insertBefore(newElement, targetElement.nextSibling);
            }
        }
    }

    Vue.prototype.getFocusCustomer = function(event){
        var result = this.getFocus(event);
        if('wrongAdd' == result) return;
        var element = this.elementx.elementSelected;
        if(event.target.getAttribute("class") != null && event.target.getAttribute("class").indexOf("cell") != -1) return; //if table column add new element then terminate
        if(undefined != element){
            var commandstr = element.split("-").join("");
            var actionstr = "this.elementx."+commandstr;
            var action = eval('(' + actionstr + ')');
            var target = new action().$mount();
            event.target.appendChild(target.$el);
            
            this.callJavaToAdd(event,target,element,"ycontainer");
        }
    }
    
    Vue.prototype.callJavaToAdd = function(event,target,element,type){
        try {
            //get element id to set in   
            var ids = this.elementx.elementSelectedParas.ids.split(",");
            //iterater element into global stack
            this.elementIterater(target.$el);
            if(0 != this.elementx.elementIteraterStack.length){
                try {
                    for(var i=0; i<ids.length;i++){
                        this.elementx.elementIteraterStack[i].setAttribute('id',ids[i]);
                    }
                } catch (error) {
                    console.log(error);
                }finally{
                    this.elementx.elementIteraterStack=[];  //to be default vaule []
                }
            }
            //call java method to notify vue file is changed
            var jsonParas = {};
            jsonParas.id = ids[0];  //element id
            //get node's parentnode, to parse parent's id is exist or not
            if(event.target.getAttribute("class") != null && event.target.getAttribute("class").indexOf("el-dialog") != -1){  // handle dialog 
                if(event.target.getAttribute("class") == "el-dialog__wrapper"){
                    jsonParas.parentId = event.target.parentNode.getAttribute("id");
                }else{
                    jsonParas.parentId = event.target.parentNode.parentNode.getAttribute("id");
                }
            }else if(event.target.getAttribute("class") != null && event.target.getAttribute("class").indexOf("el-form-item") != -1){  //handle form-item
            	console.log(event.target.getAttribute("class"));
            	if(event.target.getAttribute("class").indexOf("el-form-item__") != -1){
                    jsonParas.parentId = event.target.parentNode.getAttribute("id");
                }else{
                    jsonParas.parentId = event.target.getAttribute("id");
                }
            }else{
                jsonParas.parentId = document.getElementById(ids[0]).parentNode.getAttribute("id");
            }
            if(jsonParas.parentId == null) return;
            jsonParas.widgetName = element; //element name
            //get node's previousElment
            var targetElement = document.getElementById(ids[0]);
            var previousElement;
//            if(targetElement.getAttribute("class").indexOf("el-select") != -1){
//            	previousElement= targetElement.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling;  //因为有resizable的无用div
//            }else{
//            	previousElement= targetElement.previousElementSibling;
//            }
            var previousAll = $(targetElement).prevAll();
            /////弃用下面的逻辑
            //for(var i=0 ; i<previousAll.length; i++){
            //	if(previousAll[i].getAttribute("class") != null && previousAll[i].getAttribute("class").indexOf("ui-resizable") == -1){
            //		previousElement = previousAll[i];
            //		break;
            //	}
            //}
            /////遍历的第一个即是目标元素
            previousElement = previousAll[0];
            jsonParas.brotherId = previousElement == null?null:previousElement.getAttribute("id");
            jsonParas.location = "after"; // fixed
            jsonParas.ids = this.elementx.elementSelectedParas.ids;
            console.log("afterAdd:"+JSON.stringify(jsonParas));
            callJavaNative("afterAdd",JSON.stringify(jsonParas));
        } catch (error) {
            console.log(error);
        }finally{
            this.elementx.elementSelected = undefined;
        }
    }

    //dfs search
    Vue.prototype.elementIterater = function(root){
        this.elementx.elementIteraterStack.push(root);
        const nodes = Array.prototype.slice.call(root.children);
        if (nodes.length) {
            nodes.forEach(function (node) {
                Vue.prototype.elementIterater(node);
            });
        }
    }
    
    Vue.prototype.handleNativeComponent = function(elementDom){
    	if(elementDom.localName != null &&  elementDom.localName.indexOf("input") != -1){
        	elementDom = elementDom.parentNode;
        	return elementDom;
        }
    	if(elementDom.localName != null &&  elementDom.localName.indexOf("select") != -1){
        	elementDom = elementDom.parentNode;
        	return elementDom;
        }
    	if(elementDom.localName != null &&  elementDom.localName.indexOf("button") != -1){
        	elementDom = elementDom.parentNode;
        	return elementDom;
        }
    	if(elementDom.localName != null &&  elementDom.localName.indexOf("textarea") != -1){
        	elementDom = elementDom.parentNode;
        	return elementDom;
        }
    	if(elementDom.localName != null &&  elementDom.localName.indexOf("img") != -1){
        	elementDom = elementDom.parentNode;
        	return elementDom;
        }
    	return elementDom;
    }

    Vue.prototype.callJs_ = function(action,parameters){
        var paras = JSON.parse(parameters);
        if('add' == action){
            this.elementx.elementSelected = paras.widgetName; //get element's name
            this.elementx.elementSelectedParas = paras; //get the element's parameters then store in memory
        }else if('selectChange' == action){  // ide notify brower element changed
            var elementId = paras.id;
            var elementDom =  document.getElementById(elementId);
            if(elementDom.getAttribute("class") != null && elementDom.getAttribute("class").indexOf("el-button") != -1){ // if el-button then select it's parent
            	elementDom = elementDom.parentNode;
            }
            this.elementx.block = true;  //set block true to void callJavaNative
            //elementDom.click();  //trigger click event
            if(undefined != eventSelected){
            	if(eventSelected.getAttribute("class") !=null && (eventSelected.getAttribute("class").indexOf("yfcontainer") != -1 || eventSelected.getAttribute("class").indexOf("ycontainer") != -1)){
            		eventSelected.style.border = "";
            	}else if(eventSelected.localName == "tr" || eventSelected.localName == "th" || eventSelected.localName == "td"){ //原生组件  tr th td 不加border
            		eventSelected.style.border = "";
            	}else{
            		//eventSelected.style.border="1px solid transparent";
            		eventSelected.style.border=""; //new
            	}
                eventSelected.style.padding = "";  //零时这样处理
                if(eventSelected.getAttribute("class") != null 
                		&& eventSelected.getAttribute("class").indexOf("ui-resizable") != -1) $(eventSelected).resizable("destroy");
            }
            if(elementDom.getAttribute("class") != null && elementDom.getAttribute("class").indexOf("el-input__inner") != -1){  //el-input__inner
            	if(elementDom.parentNode.getAttribute("class") != null && elementDom.parentNode.getAttribute("class").indexOf("el-input--") != -1){
            		//elementDom = elementDom.parentNode.parentNode;
            		elementDom = elementDom.parentNode;
            	}/*else{
            		elementDom = elementDom.parentNode;
            	}*/
            }
            if(elementDom.getAttribute("class") != null && elementDom.getAttribute("class").indexOf("el-col") !=-1){  //el-col
            	if(elementDom.getAttribute("class").indexOf("el-collapse") !=-1){
            		//do nothing
            	}else{
            		elementDom = elementDom.children[0];
            	}
            }
            elementDom = this.handleNativeComponent(elementDom);
            elementDom.style.border="1px solid red";
            if(elementDom.getAttribute("class") != null && (elementDom.getAttribute("class").indexOf("el-input") != -1 || elementDom.getAttribute("class").indexOf("el-select") != -1)){  //零时这样处理 input无法拖动的问题
            	elementDom.style.padding = "0 0 0 10px";
            }
            eventSelected = elementDom;
            if(eventSelected.getAttribute("class") == null){
            	$(eventSelected).resizable();
            }else if(eventSelected.getAttribute("class").indexOf("is-leaf") == -1){
            	if(eventSelected.getAttribute("class").indexOf("el-button") != -1){  //if button then selected it's parents div
            		$(eventSelected).parent().resizable();
            		eventSelected = eventSelected.parentNode;
            	}else if(eventSelected.getAttribute("class").indexOf("el-dialog") == -1){   //if el-dialog do not resizable to keep layout normal
            		$(eventSelected).resizable();
            	}
            }
        }else if('delete' == action){  //ide notify brower element delete
        	idedeleteFlag = true;
            var elementId = paras.id;
            eventSelected = document.getElementById(elementId);
            this.deleteElement(); 
        }/**else if('deleteDupplicate' == action){
        	var elementId = paras.id;
            var deleteElement = this.deleteElementFilter(document.getElementById(elementId));
            if(this.isIE_() || this.isIE11_()){  // 判断是否是IE
　　　　			deleteElement.removeNode(true)
　　			}else{
　　　 			deleteElement.remove();
　　			}
        }**/
    }
    
    Vue.prototype.customerElementAdd = function(parentId){  //用户模板控件回调java公共方法
    	if(parentId == null || this.elementx.elementSelected == "" || this.elementx.elementSelected == "null" || this.elementx.elementSelected == undefined) return false;
    	if(this.elementx.elementSelected == null || this.elementx.elementSelected == "" || this.elementx.elementSelected == undefined) return false;
    	var paras =  this.elementx.elementSelectedParas;
    	if(paras.callback != null && paras.callback != "null" && paras.callback != ""){
    		var obj = {};
        	obj.parentId = parentId;
        	obj.widgetName = paras.widgetName;
        	console.log("callback(用户模板控件名称):"+JSON.stringify(obj));
        	try{
        		callJavaNative(paras.callback,JSON.stringify(obj));  //callback 是用户模板控件名称
        	}catch(e){
        		console.log(e)
        	}finally{
        		this.elementx.elementSelectedParas.callback = "";
        		this.elementx.elementSelected = undefined;
        		return true;
        	}
    	}else{
    		return false;
    	}
    }
}


//右键菜单弹出
document.oncontextmenu = function(event){
  var menu = document.getElementById("rMenu");
  var ev = event || window.event;
  var mX = event.clientX - 33;
  var mY = event.clientY - 20;
  menu.style.display = "block";
  menu.style.left = mX + "px";
  menu.style.top = mY + "px";
  return false;   //取消自带的右键菜单弹出
}